<template>
    <el-form ref="form" label-width="100px" :model="form" :inline="inline">
        <el-form-item v-for="item in formLabel" :key="item.label" :label="item.label">
            <el-input 
                v-if = "item.type === 'input'" 
                :placeholder = "'请输入'+item.label"
                v-model = "form[item.model]"
            ></el-input>
            <el-switch v-if = "item.type === 'switch'" v-model = "form[item.model]"></el-switch>
            <el-date-picker
                v-if = "item.type === 'date'" 
                type = 'date'
                value-format = 'yyyy-MM-dd'
                placeholder = '请选择日期'
                v-model = "form[item.model]"
            ></el-date-picker>
            <!-- v-model默认绑定value值 -->
            <el-select
                v-if = "item.type === 'select'"
                placeholder = '请选择'
                v-model = "form[item.model]"
            >
                <el-option
                    v-for = "item in item.opts"
                    :key = "item.value"
                    :label = 'item.label'
                    :value = 'item.value'
                ></el-option>
            </el-select>
            <el-upload
                class="avatar-uploader"
                v-if = "item.type === 'upload'"
                action="https://jsonplaceholder.typicode.com/posts/"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload">
                <img v-if="imageUrl" :src="imageUrl" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
            <el-transfer
                filterable
                v-if = "item.type === 'transfer'"
                :filter-method="filterMethod"
                filter-placeholder="请输入拼音"
                v-model="value"
                :data="data">
            </el-transfer>
        </el-form-item>
        <el-form-item><slot></slot></el-form-item>
    </el-form>
</template>

<script>
export default {
    name:'CommonForm',
    props:{
        formLabel:Array,
        form:Object,
        inline:Boolean,
    },
    data() {
        const generateData = _ => {
        const data = [];
        const sections = ['额骨', '上矢状窦', '额上回', '冠状缝', '大脑镰', '额中回', '大脑纵裂','中央前沟','中央前回','中央沟'];
        const pinyin = ['egu', 'shangshizhuangdou', 'eshanghui', 'guanzhuangfeng', 'danaolian', 'ezhonghui', 'danaozonglie','zhongyangqiangou','zhongyangqianhui','zhongyanggou'];
        sections.forEach((section, index) => {
          data.push({
            label: section,
            key: index,
            pinyin: pinyin[index]
          });
        });
        return data;
      };
      return {
        imageUrl: '',
        data: generateData(),
        value: [],
        filterMethod(query, item) {
          return item.pinyin.indexOf(query) > -1;
        }
      };
    },
    methods:{
        handleAvatarSuccess(res, file) {
        this.imageUrl = URL.createObjectURL(file.raw);
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      }
    }
}
</script>
<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>